<template>
	<view class="viewBg">
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
					<view>{{item.name}}</view>
					<view>
						<checkbox :value="item.value" :checked="item.checked" />
					</view>

				</label>
			</checkbox-group>
		</view>
		<view class="lineH20"></view>
		<view class="uni-common-mt">
			<map :latitude="location.latitude" :longitude="location.longitude" :markers="covers" :scale="10">
			</map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: [],
				location: {
					longitude: 123.434,
					latitude: 41.805,
				},
				companyCovers: [],
				eventCovers: [],
				userCovers: [],
				covers: [],
			};
		},
		methods: {
			checkboxChange: function(e) {
				var items = this.items,
					values = e.detail.value;
				this.updateCovers(values);
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			updateCovers(value) {
				this.covers = new Array();

				for (var i = 0; i < value.length; i++) {
					if (value[i] === '0') {
						this.covers = this.covers.concat(this.companyCovers);
					} else if (value[i] === '1') {
						this.covers = this.covers.concat(this.eventCovers);
					} else if (value[i] === '2') {
						this.covers = this.covers.concat(this.userCovers);
					}
				}
			},
		},
		onLoad() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.location = {
						longitude: res.longitude,
						latitude: res.latitude
					};
					// this.location = formatLocation(res.longitude, res.latitude)
				}
			})

			this.$http.get('ac/xagrid/appGridService/getGridInfo').then((res) => {
				var tempItems = new Array();
				//企业
				// if (res.data.company) {
				// 	tempItems.push({
				// 		value: '0',
				// 		name: '企业',
				// 		checked: 'true',
				// 	});
				// 	for (var i = 0; i < res.data.company.list.length; i++) {
				// 		var value = res.data.company.list[i];
				// 		var item = {
				// 			id: i,
				// 			title: "1",
				// 			latitude: value.latitude,
				// 			longitude: value.longitude,
				// 			iconPath: '../../../static/img/grid/qiye.png',
				// 			callout: {
				// 				content: value.name,
				// 				bgColor: "#fff",
				// 				fontSize: 22,
				// 				borderRadius: 5,
				// 				display: "ALWAYS",
				// 				padding: "10"
				// 			},
							
				// 		}
				// 		that.companyCovers.push(item);
				// 	}
				// }

				//服务日志
				if (res.data.event) {
					tempItems.push({
						value: '1',
						name: '服务日志',
						checked: 'true',
					});
					for (var i = 0; i < res.data.event.list.length; i++) {
						var value = res.data.event.list[i];
						var item = {
							// id: 500 + i,
							// title: "",
							// latitude: value.latitude,
							// longitude: value.longitude,
							// iconPath: '../../../static/img/grid/event_see.gif',
							// callout: {
							// 	content: value.name,
							// 	bgColor: "#fff",
							// 	fontSize: 22,
							// 	borderRadius: 5,
							// 	display: "ALWAYS",
							// 	padding: "10"
							// },
						}
						if (value.work_status == '1') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/event_doing.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '2') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark1.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '3') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark2.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '4') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark3.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '5') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark4.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '6') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark5.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '7') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark6.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '8') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/mark7.png',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}else if(value.work_status == '9') {
							item = {
								id: 500 + i,
								title: "",
								latitude: value.latitude,
								longitude: value.longitude,
								iconPath: '../../../static/img/grid/event_see.gif',
								callout: {
									content: value.name,
									bgColor: "#fff",
									fontSize: 22,
									borderRadius: 5,
									display: "ALWAYS",
									padding: "10"
								},
							}
						}
						that.eventCovers.push(item);
					}
				}

				//网格员
				// if (res.data.user) {
				// 	tempItems.push({
				// 		value: '2',
				// 		name: '网格员',
				// 		checked: 'true',
				// 	});
				// 	for (var i = 0; i < res.data.user.list.length; i++) {
				// 		var value = res.data.user.list[i];
				// 		var item = {
				// 			id: 100 + i,
				// 			title: "",
				// 			latitude: value.latitude,
				// 			longitude: value.longitude,
				// 			iconPath: '../../../static/img/grid/renyuan.png',
				// 			callout: {
				// 				content: value.name,
				// 				bgColor: "#fff",
				// 				fontSize: 22,
				// 				borderRadius: 5,
				// 				display: "ALWAYS",
				// 				padding: "10"
				// 			},
							
				// 		}
				// 		that.userCovers.push(item);
				// 	}
				// }

				console.log('item选项'+ that.eventCovers);
				that.items = tempItems;
				that.covers = that.eventCovers.concat(that.userCovers);
			})
		},

	}
</script>

<style>
	.viewBg {
		width: 100%;
		height: 100%;

		/* background-color: #0FAEFF; */
	}

	map {
		width: 100%;
		height: 700upx;
		position: absolute;
		top: 280upx;
	}

	.lineH20 {
		height: 20upx;
		width: 100%;
		background-color: #F7F7F7;
	}

	.lineH1 {

		height: 2upx;
		width: 100%;
		/* margin-left: 10upx; */
		background-color: #F7F7F7;
	}
</style>
